import React, { Component} from 'react';
import Loadable from 'react-loadable';
import {Breadcrumb} from 'jdcloudui';
function Loading(props) {
  if (props.error) {
    return <div>Error!</div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}
export default class CompA extends React.PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      components: null
    };
  }
  componentDidMount() {
  	this.props.load().then(() => {
      this.setState({
        components: this.loadInstance()
      });
    });
  }
  loadInstance() {
    var {components = {}} = this.props.components||{};
    var instances = {};
    Object.keys(components).map((hook)=>{
      components[hook].map((value)=>{
        const componentName = value["name"];
        var Ins = Loadable({
          loader: () => import(`../${componentName}/${componentName}`).then(object => object.default),
          loading: Loading,
          delay: 10,
          render(loaded) {
            let Component = loaded;
            let props = value["config"],key = "key_"+value["id"];
            return <Component {...props} genKey={key} />;
          }
        });
        instances[hook] = instances[hook] || [];
        instances[hook].push(Ins)
      });
    });

    return instances;
  }
  render() {
    console.log('111');
    return (
        <div className="ui-container ui-platform">
          <div className="ui-breadcrumb">
            <Breadcrumb>
              <Breadcrumb.Item>金融管理</Breadcrumb.Item>
              <Breadcrumb.Item>发票管理</Breadcrumb.Item>
              <Breadcrumb.Item>采购商发票管理</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className="ui-ct">
            <div className="ui-bd">
              {
                (this.state.components && this.state.components.HOOK_BuyerBillSearch||[]).map((Component,i)=>{
                  return <Component key={i} />
                })
              }
            </div>
          </div>
      </div>
    );
  }
}
